<template>
    <view>
        <view class="contract-list">
            <block v-for="(contract, i) in contractList" :key="i">
                <view class="contract-item">
                    <view class="contract-left">
                        <view class="left-line">
                            <view class="title">日期:</view>
                            <view class="info-value">
                                {{contract.date}}
                            </view>
                        </view>
                        <view class="left-line">
                            <view class="title">状态:</view>
                            <view class="info-value">
                                {{contract.state}}
                            </view>
                        </view>
                    </view>
                    <view class="contract-right">
                        <button class="contract-button" @click="preview(contract.id)">预览</button>
                        <button class="contract-button" @click="sign(contract.id)">签字</button>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        name: "my-contract",

        computed: {
            ...mapState('m_user', ['token'])
        },

        data() {
            return {
                contractList: [{
                        id: 1,
                        date: '2021-01-01',
                        state: '待签署'
                    },
                    {
                        id: 2,
                        date: '2021-03-02',
                        state: '待审核'
                    },
                    {
                        id: 3,
                        date: '2021-04-02',
                        state: '已签署'
                    },
                    {
                        id: 4,
                        date: '2021-05-02',
                        state: '已失效'
                    }
                ]
            };
        },
        methods: {
            ...mapMutations('m_user', ['updateContractId','updateFlowType']),
            preview(param) {
                console.log(param)
                console.log('preview')
            },

            sign(param) {
                console.log(param)
                console.log('sign')
                this.updateContractId(param)
                this.updateFlowType('F')
                uni.navigateTo({
                    url: '/pages/contract-info/contract-info'
                })
            }
        }
    }
</script>

<style lang="scss">
    .contract-item {
        height: 240rpx;
        display: flex;
        margin: 10rpx 10rpx;
        border: 2rpx solid green;
        border-radius: 50rpx;
        background-color: aquamarine;
    }

    .contract-left {
        display: flex;
        flex-direction: column;
        // align-content: center; 
        justify-content: space-around;
        margin-left: 20rpx;
    }

    .left-line {
        display: flex;
        // margin: 40rpx 20rpx;
    }

    .title {
        margin-right: 40rpx;
    }

    .contract-right {
        display: flex;
        flex-direction: column;
        // align-content: center; 
        justify-content: space-around;
        margin-left: 100rpx;
    }

    .contract-button {
        height: 100rpx;
        width: 150rpx;
        // margin: 20rpx 10rpx;
        background-color: seagreen;
    }
</style>